
// 轮播图
class Banner{
    constructor(){
        // 获取DOM元素并储存属性
        this.banner_lists = $(".banner_nav");//所有图片及文字
        // li选取某张图片
        this.lists = $(".banner>ol>li");
        // 左右按钮
        this.left_but = $(".banner>p>.icon-jiantou_liebiaoxiangzuo_o");
        this.right_but = $(".banner>p>.icon-jiantou_liebiaoxiangyou_o");
        // 暂停按钮
        this.stop_but = $(".banner>ol>a");
    }
    init(){
        this.banner();
    }
    banner(){
        // 获取当前this指向并储存
        let _this = this;
        let clear_time =null;
        let index = 0;
        let flag = $(".banner>ol>a .show").index();
        console.log(flag)
        // 第一个事件点击某个list显示对应的一张图片
        this.lists.on("click",function(){
            index = $(this).index();
            _this.banner_lists.eq(index).addClass("action").siblings().removeClass("action")
        })

        // 第二个事件点击左右按钮触发切换相应的图片
        // 左键
        this.left_but.on("click",function(){
            index--;
            if(index<0){
                index = _this.banner_lists.length-1;
            }
            _this.banner_lists.eq(index).addClass("action").siblings().removeClass("action")
        })
        // 右键
        this.right_but.on("click",function(){
            index++;
            if(index>_this.banner_lists.length-1){
                index = 0;
            }
            _this.banner_lists.eq(index).addClass("action").siblings().removeClass("action")
        })

        // 自动轮播
        clear_time = setInterval(function(){
            _this.right_but.click();
        }, 5000);

        // 鼠标hover暂停轮播,移除继续轮播
        $(".banner").hover(stop,action)
        
            function stop(){
                if(flag==1){
                    clearInterval(clear_time);
                    document.querySelector(".banner video").pause();
                }
            }
            
            function action(){
                if(flag==1){
                    clearInterval(clear_time);
                    document.querySelector(".banner video").play();
                    clear_time = setInterval(() => {
                        _this.right_but.click();
                    }, 5000);
                }
                   
            }

        // 暂停按钮设置暂停轮播,并切换样式
        _this.stop_but.on("click",function(){
            flag++;
            if(flag>$(".banner>ol>a>span").length-1){
                flag=0;
                document.querySelector(".banner video").pause();
                clearInterval(clear_time);
            }else{
                clearInterval(clear_time);
                document.querySelector(".banner video").play();
                clear_time = setInterval(() => {
                _this.right_but.click();
                }, 5000);
            }
            $(".banner>ol>a>span").eq(flag).addClass("show").siblings().removeClass("show");
        })

    }


}

// 本月精选Tab选项卡
class Tab{
    constructor(buts,lists){
        // 获取DOM元素对象并储存属性
        // 选择按钮
        this.tab_xuan = $(buts);
        // 展示部分
        this.tab_list = $(lists);
    }
    init(){
        this.tab()
    }
    tab(){
        // 储存this
        let _this = this;
        _this.tab_xuan.on("click",function(){
            let index = $(this).parent().index()
            _this.tab_xuan.removeClass("active");
            _this.tab_xuan.eq(index).addClass("active");
            index = index * 100 +"%";
            _this.tab_list.animate({ left: index }, 500);

        })
    }
}

// 首页渲染结构
class Apply{
    constructor(){
        

    }
    init(){
        // 渲染部分 
        let str = "";
        let _this = this
        $.ajax({
            url:"http://localhost:3000/list",
            dataType:"json",
        }).then(function(data){
            let newdata = data.pagecontent;
            for(let i=0;i<4;i++){
                str +=`
                <div class="select_list">
                <div class="select_list_big">
                  <img
                  data-original="${newdata[i*5].image}"
                    class="lazy"
                    alt=""
                    class="big_img"
                  />
                  <div>
                    <h2>三星校园优惠</h2>
                    <p>购买指定型号手机<span>送Galaxy Buds Live</span></p>
                    <button>
                      了解更多<span class="iconfont icon-jiantou_youshang"></span>
                    </button>
                  </div>
                </div>
                <div class="select_list_smile">
                  <div class="list_smile_top">
                    <img
                    data-original="${newdata[i*5+1].image}"
                      class="lazy"
                      alt=""
                    />
                    <!-- <div> -->
                    <h3>Galaxy S22 Ultra</h3>
                    <p>三星网上商城专属色</p>
                    <button>
                      立即购买<span class="iconfont icon-jiantou_youshang"></span>
                    </button>
                    <!-- </div> -->
                  </div>
                  <div class="list_smile_bottom">
                    <img
                    data-original="${newdata[i*5+2].image}"
                      class="lazy"
                      alt=""
                    />
                    <!-- <div> -->
                    <h3>缤色定制版</h3>
                    <p>型型色色 由你定义</p>
                    <button>
                      开始定制<span class="iconfont icon-jiantou_youshang"></span>
                    </button>
                    <!-- </div> -->
                  </div>
                </div>
                <div class="select_list_smile">
                  <div>
                    <img
                    data-original="${newdata[i*5+3].image}"
                      class="lazy"
                      alt=""
                    />
                    <!-- <div> -->
                    <h3>夏日钜惠 学生好礼</h3>
                    <p>教育会员前往门店购买指定型号手机，可享优惠好礼</p>
                    <button>查看好礼</button>
                    <!-- </div> -->
                  </div>
                  <div>
                    <img
                    data-original="${newdata[i*5+4].image}"
                      class="lazy"
                      alt=""
                    />
                    <!-- <div> -->
                    <h3>QLED电视QX3</h3>
                    <p>享免费安装</p>
                    <button>
                      立即购买<span class="iconfont icon-jiantou_youshang"></span>
                    </button>
                    <!-- </div> -->
                  </div>
                </div>
              </div>        
                     `
            }
            $(".section_new_month #newlist").html(str)
                    // 渲染轮播
            let oldtab = new Tab(".section_new_month>ul>li>a",".section_new_month>div>.select_list");
            oldtab.init()

            // 添加图片懒加载
            $("img.lazy").lazyload({
                effect : "fadeToggle"
            });
        })
    }
}

// 无缝轮播
class MoveTab{
    constructor(listUl,listImg,oldindex,fatherdom){
        // 获取DOM元素对象并储存属性
        // 选择按钮
        this.movetab_xuan = $(listUl);
        // 展示部分
        this.movetab_list = $(listImg);
        // 获取初始的active的下标
        this.oldindex = $(oldindex).parent().index()
        // 获取移动的父元素
        this.fatherdom = $(fatherdom)

    }
    init(){
        this.movemovetab()
    }
    movemovetab(){
        // 储存this
        let _this = this;

        // 获取点击前的默认下标
        _this.movetab_xuan.on("click",function(){
            let index = $(this).parent().index();
            let width = window.parseInt(_this.movetab_list.width());
            
             // 判断公共部分
            _this.movetab_xuan.removeClass("active");
            _this.movetab_xuan.eq(index).addClass("active");   
            
            
            function checked(){
                // 还原样式
                _this.fatherdom.css("left",0);
                _this.movetab_list.css("left",-index*width+"px")
                _this.movetab_list.removeClass("left_box");
            }

            if(index>_this.oldindex){
                // 先给所有的盒子全部使用相对定位的left改变位置---位移量为点击的下标 -1 预留动画切换的位移量
                _this.movetab_list.css("left",-(index-1)*width+"px");
                // 这两行代码保证上一步显示的图片保持当前位置---改回来了
                _this.movetab_list.eq(_this.oldindex).addClass("left_box");
                $(".left_box").css("left",-(index-(index-_this.oldindex))*width+"px")
                
                // 动画加给父元素,使父元素相对定位的left向左运动达到无缝切换的效果
                _this.fatherdom.animate({
                    left:-width+"px",
                    // 使用回调函数在效果展示完成之后将父元素位置改回 0 ,同时将所有的盒子位移量+父盒子的位移量
                },checked)
            }else if(index<_this.oldindex){
                // 先给所有的盒子全部使用相对定位的left改变位置---位移量为点击的下标 +1 预留动画切换的位移量
                _this.movetab_list.css("left",-(index+1)*width+"px");
                // 这两行代码保证上一步显示的图片保持当前位置---改回来了
                _this.movetab_list.eq(_this.oldindex).addClass("left_box");
                $(".left_box").css("left",-(index+(_this.oldindex-index))*width+"px")

                // 动画加给父元素,使父元素相对定位的left向左运动达到无缝切换的效果
                _this.fatherdom.animate({
                    left:width+"px",
                    // 使用回调函数在效果展示完成之后将父元素位置改回 0 ,同时将所有的盒子位移量 + 父盒子的位移量
                },checked)
            }
            _this.oldindex = index;

        })  

    }
}

// 底部更多模块
class More{
    constructor(){
        // 获取元素节点
        this.text_list = $(".more_list_text ul li");
        this.img_list = $(".more_list_img a");
    }
    init(){
        let _this = this;
        _this.text_list.on("mouseover",function(){
            _this.img_list.removeClass("more_active");
            _this.text_list.removeClass("more_text_active");

            $(this).addClass("more_text_active");
            _this.img_list.eq($(this).index()).addClass("more_active")
        })
    }
}


class Index{
    constructor(){
        // 获取轮播图类
        this.banner = new Banner();
        this.tab = new Tab(".select_old_month>ul>li>a",".select_old_month>div>.select_list");
        this.movetab = new MoveTab(".select_move>ul>li>a",".select_move .move_list .wrapper",".select_move>ul>li>.active",".select_move .move_list");
        this.tvtab = new MoveTab(".TV .tv_list_ul ul li a",".TV .tv_list .tv_list_group",".TV .tv_list_ul ul li .active",".TV .tv_list");
        this.livetav = new MoveTab(".select_live .live_list_ul ul li a",".select_live .live_list .group",".select_live .live_list_ul ul li .active",".select_live .live_list");
        this.apply = new Apply()
        this.more = new More();
    }
    init(){
        // 动态设置部分模块宽度
        this.autoWidth();
        // 设置首页轮播图效果
        this.banner.init();
        // 设置首页Tab选项卡效果
        this.tab.init();
        // 无缝轮播效果
        this.movetab.init();
        // TV模块效果
        this.tvtab.init()
        // 生活模块
        this.livetav.init()
        // 渲染模块
        this.apply.init()
        // 更多模块
        this.more.init()

    }
    autoWidth(){
        // 部分模块动态获取宽度
        $(".banner_vio_img").css("height",$(".banner_vio_img img").prop("height"));
           $(".select_list").css("height",$(".banner_vio_img img").prop("height"));
           $(".more_list_img").css("height",$(".more_img").prop("width"));
        $(window).on("resize",function(){
           $(".banner_vio_img").css("height",$(".banner_vio_img img").prop("height"));
           $(".select_list").css("height",$(".big_img").prop("height"));
           $(".more_list_img").css("height",$(".more_img").prop("width"));
        })

        // 回到顶部按钮的显示隐藏
        $(document).on("mousewheel",function(e){
            let ev = e || window.event;
            if(ev.originalEvent.deltaY<0){
                 $(".comeback").css("display","block");
                $(".comeback").animate({
                    opacity:1,
                },100)
            }else{
                $(".comeback").animate({
                    opacity:0,
                },100,function(){
                    $(".comeback").css("display","none");
                })
            }
        })

        // 回到顶部按钮的功能实现
        $(".comeback").on("click",function(){
            console.log($("html"))
            $("html").animate({
                scrollTop:0
            },300)
        })
    }
}

export{
    Index
}